<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div class="tag-header" slot="header">
      <span>最热标签</span>
      <el-button @click="moreTags" class="tag-more" type="text">查看全部</el-button>
    </div>
    <ul class="my-tag-list">
      <li :key="t.id" v-for="t in hotTags">
        <el-button
          @click="tag(t.id)"
          class="my-tag-button"
          plain
          round
          size="mini"
          type="primary"
        >{{t.tagName}}</el-button>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  props: {
    hotTags: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  methods: {
    moreTags () {
      this.$router.push({ name: 'tagAll' })
    },
    tag (id) {
      this.$router.push({ name: 'articleByTag', params: { id } })
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log(to.path)
    next()
  }
}
</script>

<style>
.tag-header {
  text-align: left;
  font-weight: 600;
  line-height: 20px;
}
.tag-more {
  float: right;
  font-size: 14px;
  padding: 0;
}
.my-tag-list {
  text-align: left;
  list-style-type: none;
}
.my-tag-list button {
  margin: 5px;
}
.my-tag-list li {
  padding: 2px;
  display: inline;
  line-height: 12px;
}
.my-tag-list span {
  line-height: 12px;
}
</style>
